forum

Home / DeveloperSection / Forums / How do filters work in AngularJS?

Ask Question
Steilla Mitchel

Steilla Mitchel

Follow
I completed my post-graduation in 2013 in the engineering field. Engineering is the application of science and math to solve problems. Engineers figure out how things work and find practical uses for scientific discoveries. Scientists and inventors often get the credit for innovations that advance the human condition, but it is engineers who are instrumental in making those innovations available to the world. I love pet animals such as dogs, cats, etc.

Can you answer this question?

Answer

1 Answers

Ashutosh Kumar Verma

Ashutosh Kumar Verma

19-Jun-2024

AngularJS Filters

Filters in AngularJS are used to set the value of an expression to be displayed to the user. They can be used in visual templates programmatically in the main syntax system ({{ word | filter:options }}) or in controllers and services.

Also, Read: How to display length of filtered ng-repeat data?

How Filters works

Here are few points that explains the working of filters in Angular application,

Usage in Templates-

Filters are applied to expressions in double curly braces ({{ }}) or directives such as ng-bind. Syntax

{{ expression | Filter:Options }} Example

<p>{{ dateValue | date:'yyyy-MM-dd' }}</p> This example has the word dateValue, the filter name date, and the filter parameters (options) 'yyyy-MM-dd'.

Chaining Filters

Filters can be chained using the pipe (|) symbol. Example

 <p>{{ textValue | uppercase | limitTo:20 }}</p> Here, the textValue is first converted to uppercase (uppercase filter), then limited to 20 characters (limitTo filter).

Filtering Arrays Filters can also be used to filter an array based on specific criteria using filter.

Example-

<div ng-repeat="item in items | filter:searchText">
	 {{ item.name }}
</div>

In this example, objects are lists of items, and searchText is a pattern bound to the input field. AngularJS will filter objects based on the searchText value.

Example- 

<!DOCTYPE html>
<html data-ng-app="myApp">
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>ng-Root Scope</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>

<body data-ng-controller="myController">
    <div class="container my-4">

        <!-- type to filter data -->
        <input data-ng-model="name" class="form-control" placeholder="Type to filter" />
        <!-- show when input data in text field -->
        <h4 data-ng-hide="!name" class="my-2">filtered data on "{{name}}"</h4>
        <table class="table my-2">
            <thead>
              <tr>
                <th scope="col">#</th>
                <!-- click on headers apply order by name and country -->
                <th data-ng-click="Order('name')" >Name</th>
                <th data-ng-click="Order('country')" scope="col">Country</th>
              </tr>
            </thead>
            <!-- bind the data from array with filter and orderBy -->
            <tbody data-ng-repeat="data in names | filter: name | orderBy : myOrder ">
              <tr>
                <th scope="row">{{$index + 1}}</th>
                <td data-ng-bind="data.name"></td>
                <td data-ng-bind="data.country"></td>
              </tr>
            </tbody>
          </table>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
    crossorigin="anonymous"></script>

    <script>
        angular.module("myApp", [])
        .controller("myController", ['$scope', function($scope){
            $scope.names = [
            {name:'Jani',country:'Norway'},
            {name:'Carl',country:'Sweden'},
            {name:'Margareth',country:'England'},
            {name:'Hege',country:'Norway'},
            {name:'Joe',country:'Denmark'},
            {name:'Gustav',country:'Sweden'},
            {name:'Birgit',country:'Denmark'},
            {name:'Mary',country:'England'},
            {name:'Kai',country:'Norway'}
            ];
            // function to apply order by
            $scope.Order = function(text)
            {
                $scope.myOrder = text;
            }
        }]);
    </script>

</body>
</html>

Output- 

How do filters work in AngularJS?

Filters in AngularJS provide a powerful way to organize and manipulate data directly in templates or programmatically. They contribute to separation of concerns by allowing data transformation logic to be cached and reused in different parts of the application.

Also, Read: How orderBy multiple fields in Angular?

MindStick Training

Liked By